<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            width: 600px;
            margin: 0 auto;
        }
li{
   border: 1px solid red;
   width: 180px;
   display: inline-block; 
   background-color:blue;
  text-align: center;

}
img{
    width: 180px;
}


*{
    list-style: none;
}
    </style>
</head>
<body>
    <button>点我</button>
    <ul>

    </ul>


</body>
</html>
<script>
    // var arr =[
    //     {title:"apple",price:"18",img:"./img/a.png"},
    //     {title:"apple",price:"18",img:"./img/a.png"},
    //     {title:"apple",price:"18",img:"./img/a.png"},
    // ]

    // for (var i=0;i<arr.length;i++){
    //     console.log(arr[i].title);
        
    // }
   var oBtn=document.querySelector('button');
   var oUl=document.querySelector('ul') 
 
   oBtn.onclick=function(){
    var str = '';
    var arr =[{"goods_id":1,"title":"南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038","img_big_logo":"https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg","price":"25.00","current_price":"17.50","goods_number":24,"is_sale":true,"sale_type":"70%","is_hot":false,"category":"其他"},{"goods_id":2,"title":"南极人 袜子男士 男女士船袜 精梳棉竹纤维棉袜 情侣袜 运动 休闲 商务男袜短袜吸湿排汗透气男袜女袜子P3015K31","img_big_logo":"https://image3.suning.cn/uimg/b2c/newcatentries/0070081143-000000000132291774_2_800x800.jpg","price":"29.00","current_price":"29.00","goods_number":71,"is_sale":false,"sale_type":"100%","is_hot":true,"category":"内衣配饰"},{"goods_id":3,"title":"南极人 【5双礼盒装】男士袜子中筒棉袜四季商务袜透气袜子男P3014","img_big_logo":"https://image4.suning.cn/uimg/b2c/newcatentries/0070081143-000000000131021736_2_800x800.jpg","price":"29.00","current_price":"17.40","goods_number":85,"is_sale":true,"sale_type":"60%","is_hot":true,"category":"内衣配饰"},{"goods_id":4,"title":"Palmer’s 帕玛氏 孕妇 4359-6 产前产后妊娠纹多效玫瑰精华油 150ml 美国直采","img_big_logo":"https://image3.suning.cn/uimg/b2c/newcatentries/0070088060-000000000618581890_1_800x800.jpg","price":"74.00","current_price":"74.00","goods_number":13,"is_sale":false,"sale_type":"100%","is_hot":true,"category":"其他"},{"goods_id":5,"title":"PPTV-32C3 32英寸 1GB+8GB 4核 64位处理器 高清智能网络WIFI平板电视机","img_big_logo":"https://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000657032630_1_800x800.jpg","price":"679.45","current_price":"679.45","goods_number":82,"is_sale":false,"sale_type":"100%","is_hot":true,"category":"大家电"},{"goods_id":6,"title":"浪莎保暖裤 加绒加厚 外穿打底裤高腰踩脚裤 女秋冬大码中厚连裤袜","img_big_logo":"https://image3.suning.cn/uimg/b2c/newcatentries/0070129883-000000000160116107_2_800x800.jpg","price":"19.00","current_price":"13.30","goods_number":41,"is_sale":true,"sale_type":"70%","is_hot":false,"category":"内衣配饰"}]
    for (var i =0;i<arr.length;i++){
        str += `<li>
            <img src="${arr[i].img_big_logo}" alt"">
            <h5>${arr[i].title}</h5>
            <p>${arr[i].price}</p>
            </li>`
        
    }
    oUl.innerHTML=str;
}
    
    
    

</script>